<template>
  <div class="icons">
    <swiper>
      <swiper-slide>
        <div class="icon"  v-for="item of List" :key="item.id">
          <div class="icon-div">
            <img class="icon-img" :src="item.imgUrl" />
          </div>
          <div class="icon-p">{{item.desc}}</div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'Icons',
  props: {
    List: Array
  }
}
</script>

<style lang="stylus" scoped>
  .icons
    height: 160px
    width: 100%
    float : left
    background :#eee
    text-align :center
    .icon
      display :inline-block
      width :80px
      height: 80px
      .icon-div
        height: 70%;
        text-align: center
        padding-top: 0.1rem
        .icon-img
          height: 80%
          margin-top :.1rem
      .icon-p
        text-align: center
        white-space : nowrap
        overflow :hidden
        text-overflow :ellipsis
        font-size :.25rem
</style>
